<!--
 * @Description: 第十八章（异步组件&代码分包&suspense）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-16 12:40:07
-->
<template>
  <div class="sk">
    <div class="sk-2">
      <div class="sk-2-img"></div>
      <div class="sk-2-text"></div>
    </div>
    <hr />
    <div class="sk-3"></div>
    <div class="sk-3"></div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
</script>
<style scoped lang="less">
.sk {
  display: flex;
  flex-direction: column;
  .sk-2 {
    display: flex;
    flex-direction: row;
    .sk-2-img {
      width: 286px;
      height: 90px;
      background-color: #eee;
      margin-right: 10px;
    }
    .sk-2-text {
      width: 150px;
      height: 40px;
      margin: 0 10px;
      align-self: center;
      background-color: #eee;
    }
  }

  .sk-3 {
    width: 100%;
    height: 40px;
    margin: 5px 0;
    background-color: #eee;
  }
}
</style>
